<template>
  <div class="followUpList">
    <div class="relative">
      <TitleName
        class="title absolute z-1 top-0 left-0"
        icon="i-carbon-bookmark-filled"
        title="跟进情况"
      ></TitleName>
      <!-- 查询条件 -->
      <avue-form v-model="queryForm" :option="queryFormOption">
        <template #menu-form="{}">
          <el-button
            icon="Download"
            plain
            type="primary"
            @click="handleDownload"
            >导出</el-button
          >
        </template>
      </avue-form>
    </div>
    <div class="followUpList-cnt app-container">
      <div v-if="tableTotal > 0" class="chatCnt">
        <div
          v-for="(item, index) in tableData"
          :key="index"
          class="chatCnt-box"
        >
          <el-row :span="24">
            <el-col :span="14" class="text-#000 text-16px">
              <span style="font-weight: 700">{{ item.userName }}</span>
              <div class="inline-block ml-10px text-#666 text-14px">
                跟进 (<dict-tag
                  :options="followup_method"
                  :value="item.type"
                  class="inline-block text-#666"
                />)
                <span
                  v-if="queryForm.tableName == 'biz_customer'"
                  class="ml-10px"
                  ><span class="text-#666">联系人：</span
                  >{{ item.linkName }}</span
                >
                <span
                  v-if="
                    queryForm.tableName == 'ord_business_opportunity' ||
                    queryForm.tableName == 'ord_small_medium'
                  "
                  class="ml-10px"
                  ><span v-if="item.attnName" class="text-#666">联系人：</span
                  >{{ item.attnName }}</span
                ><span v-if="item.job">({{ item.job }})</span
                ><span class="ml-10px"> {{ item.attnPhone || '' }}</span>
              </div>
              <div
                v-if="tableParam.tableName == 'biz_telephone_record'"
                class="inline-block ml-10px text-#666 text-14px"
              >
                结果 (<dict-tag
                  :options="sys_follow_result"
                  :value="item.followResult"
                  class="inline-block text-#666"
                />)
              </div>
            </el-col>
            <el-col :span="10" class="text-right">{{
              parseTime(item.followTime)
            }}</el-col>
            <el-col
              v-if="
                item.outflowName &&
                (queryForm.tableName == 'ord_business_opportunity' ||
                  queryForm.tableName == 'ord_small_medium')
              "
              :span="24"
              class="mt-5px mb-5px"
            >
              <span class="text-#666">流失商机：</span>
              {{ item.outflowName }}
            </el-col>
            <el-col :span="24" class="mt-10px"
              ><p class="m-0" style="word-break: break-all">
                {{ item.content }}
              </p></el-col
            >
          </el-row>

          <el-row :span="24" class="text-12px leading-32px mt-10px">
            <el-col
              v-if="item.sysAttachFiles && item.sysAttachFiles.length > 0"
              :span="20"
            >
              <span class="text-#666">附件：</span>
              <div
                v-for="files in item.sysAttachFiles"
                :key="files.fileId"
                class="inline-block"
              >
                <a
                  :href="files.url"
                  class="mr-10px text-#1890ff"
                  target="_blank"
                  >{{ files.origFileName }}</a
                >
              </div>
            </el-col>
            <el-col
              :offset="
                item.sysAttachFiles && item.sysAttachFiles.length > 0 ? 0 : 20
              "
              :span="4"
              class="text-right"
            >
              <el-button
                icon="ChatLineRound"
                @click="handleComment(item, index)"
                >评论{{
                  item.commitVos && item.commitVos.length > 0
                    ? '(' + item.commitVos.length + ')'
                    : ''
                }}</el-button
              >
            </el-col>
          </el-row>
          <div class="comment">
            <div v-if="item.commitVos" class="mt-10px">
              <div
                v-for="el in item.commitVos"
                :key="el.id"
                class="comment-box"
              >
                <div class="flex">
                  <div class="flex-1 pt-10px">
                    <span class="text-#000 text-16px mr-10px flex-1">{{
                      el.userName
                    }}</span
                    >{{ parseTime(el.createTime) }}
                  </div>
                  <div class="flex-1 text-right">
                    <i class="p-10px pointer text-25px" @click="delCmit(el)"
                      >×</i
                    >
                  </div>
                </div>
                <p style="word-break: break-all">{{ el.content }}</p>
              </div>
            </div>
            <div
              v-if="chatList && chatList.length > 0"
              :style="{
                display: chatList[index].isChat ? 'block' : 'none'
              }"
              class="chat mt-10px"
            >
              <el-input
                v-model="chatList[index].content"
                maxlength="200"
                placeholder="请输入评论内容"
              >
                <template #append>
                  <el-button type="primary" @click="chatFn(item, index)"
                    >评论</el-button
                  >
                </template>
              </el-input>
            </div>
          </div>
        </div>
      </div>
      <el-empty v-else description="暂无数据" />
    </div>
    <pagination
      v-show="tableTotal > 0"
      v-model:limit="queryForm.pageSize"
      v-model:page="queryForm.pageNum"
      :total="tableTotal"
      @pagination="getList"
    />
  </div>
</template>
<script name="FollowUpList" setup>
import { useRoute, useRouter } from 'vue-router'
import * as Api from '@/api/common/common.js'
import { followup_method } from '@/hooks/dict/useProject'
import { filter } from 'lodash'
import { computed, watchEffect } from 'vue'
const route = useRoute()
const props = defineProps({
  // 查询参数
  tableParam: {
    required: true
  }
})
const { proxy } = getCurrentInstance()
const { customer_status, sys_follow_result } = proxy.useDict(
  'customer_status',
  'sys_follow_result'
)
const lock = ref(0)
// 设置参数
const data = reactive({
  queryForm: {
    pageNum: 1,
    pageSize: 10
  },
  // 查询条件form表单配置
  queryFormOption: {
    menuBtn: props.tableParam.tableName !== 'biz_telephone_record',
    menuPosition: 'right',
    menuSpan: 2,
    labelWidth: 0,
    submitBtn: false,
    emptyBtn: false,
    column: [
      {
        prop: 'keyword',
        placeholder: '请输入关键字',
        type: 'input',
        offset: 12,
        span: 4,
        change: ({ value, column }) => {
          queryForm.value.keyword = value
          getList()
        }
      },
      {
        type: 'daterange',
        prop: 'bidOpeningTime',
        format: 'YYYY-MM-DD',
        valueFormat: 'YYYY-MM-DD',
        startPlaceholder: '开始时间',
        endPlaceholder: '结束时间',
        span: 6,
        change: ({ value, column }) => {
          queryForm.value.bidOpeningTime = value
          getList()
        }
      }
    ]
  },
  // table 总数据
  tableTotal: 0,
  //table 数据
  tableData: [],
  content: ''
})
const { tableData, tableTotal, queryForm, queryFormOption, content } =
  toRefs(data)

const chatList = ref([])
watch(
  () => props.tableParam,
  val => {
    if (JSON.stringify(props.tableParam) != '{}') {
      console.info('跟进记录')
      init()
    }
  },
  {
    deep: true,
    immediate: true
  }
)
/**
 * 初始化方法
 */
async function init() {
  queryForm.value = { ...queryForm.value, ...props.tableParam }
  getList()
}
//查询table列表
function getList() {
  let param = JSON.parse(JSON.stringify(queryForm.value))
  console.log(queryForm.value.bidOpeningTime, 'ueryForm.value.bidOpeningTime--')
  param.followStartTime =
    queryForm.value.bidOpeningTime &&
    JSON.stringify(queryForm.value.bidOpeningTime) != '[]'
      ? queryForm.value.bidOpeningTime[0] + ' 00:00:00'
      : ''
  param.followEndTime =
    queryForm.value.bidOpeningTime &&
    JSON.stringify(queryForm.value.bidOpeningTime) != '[]'
      ? queryForm.value.bidOpeningTime[1] + ' 23:59:59'
      : ''
  delete param.bidOpeningTime
  chatList.value = []
  Api.getSysfucommit(param).then(res => {
    tableData.value = res.rows
    tableTotal.value = res.total
    if (res.rows && res.rows.length > 0) {
      res.rows.forEach(item => {
        chatList.value.push({ isChat: false })
      })
    }
  })
}
// 导出
const handleDownload = () => {
  let param = JSON.parse(JSON.stringify(queryForm.value))
  param.followStartTime =
    queryForm.value.bidOpeningTime &&
    JSON.stringify(queryForm.value.bidOpeningTime) != '[]'
      ? queryForm.value.bidOpeningTime[0] + ' 00:00:00'
      : ''
  param.followEndTime =
    queryForm.value.bidOpeningTime &&
    JSON.stringify(queryForm.value.bidOpeningTime) != '[]'
      ? queryForm.value.bidOpeningTime[1] + ' 23:59:59'
      : ''
  delete param.bidOpeningTime
  delete param.pageNum
  delete param.pageSize
  proxy.downLoadByUrl(
    '/system/sysfucommit/export',
    param,
    `跟进信息_${new Date().getTime()}.xlsx`
  )
}
// 删除评论
const delCmit = row => {
  proxy.$modal.confirm('是否删除该评论').then(async () => {
    const res = await Api.delRemoveCommit(row.comId)
    if (res.code === 200) {
      proxy.$modal.msgSuccess('删除成功')
      getList()
    }
  })
}
//发布评论
const chatFn = (row, index) => {
  let obj = JSON.parse(JSON.stringify(chatList.value[index]))
  if (!obj.content) {
    proxy.$modal.msgError('评论内容不能为空')
    return false
  }
  let param = {
    businessId: queryForm.value.businessId,
    content: obj.content,
    fucId: row.fucId,
    tableName: queryForm.value.tableName
  }
  Api.saveCommit(param).then(res => {
    proxy.$modal.msgSuccess('评论成功')
    getList()
  })
}
// 评论
const handleComment = (row, index) => {
  let nowChat = JSON.parse(JSON.stringify(chatList.value))
  nowChat[index].isChat = !nowChat[index].isChat
  chatList.value = nowChat
}
</script>
<style lang="scss">
.followUpList .avue-form__menu.avue-form__menu--center {
  text-align: left !important;
}
.followUpList-cnt {
  a:focus,
  a:hover {
    color: #1890ff;
  }
  .chatCnt {
    @apply relative pl-20px;
    .chatCnt-box {
      @apply relative bg-#f7fbfe border-1px border-#d7e8f4 border-solid p-15px text-14px text-#999  mt-20px;
      &::after {
        content: '';
        @apply absolute top-0 left--25px h-10px w-10px bg-#fff border-#0079fe  border-2px border-solid rounded z-1;
      }
    }
    &::after {
      content: '';
      @apply absolute top-0 left-0 h-100% w-1px bg-#ccc;
    }
  }
  .comment-box {
    @apply bg-#fff border-1px border-#d7e8f4 border-solid px-15px mb-15px;
  }
  .el-input-group__append button.el-button,
  .el-input-group__append button.el-button:hover {
    @apply bg-#0079fe text-#fff;
  }
}
</style>
